<template>
  <NuxtLayout>
    <Head>
      <Title>首页 - 国内领先的企业智能信息化IT解决方案提供商</Title>
      <Meta name="description" content="管理页面" />
    </Head>
    <div class="app-view">
      <ProjectItem :meta="state.project" :data="state.project.rows">
        <template #page>
          <div class="app-page flex justify-between">
            <div />
            <el-pagination v-model:page-size="limit" background layout="total, prev, pager, next, jumper" :total="state.total" @current-change="onCurrentChange" />
          </div>
        </template>
      </ProjectItem>
    </div>
  </NuxtLayout>
</template>
<script setup lang="ts">
import { BasePagination } from '~~/config'

const { page, limit } = BasePagination
const state = reactive({
  project: {
    title: '项目',
    subTitle: '10年开发经验+100家合作企业+硬核技术团队',
    rows: [],
    total: 0,
  },
  // 总页数
  total: 0,
  // 查询对象
  queryParams: {
    type: 'lastest',
    modelid: 0,
    title: '',
    page,
    limit,
  },
})
// 获取文章
const getCategory = async () => {
  const { data: res }: any = await useAsyncData(`use_Category`, () => useCategory())

  const rows = res.value.data?.rows
  const current = rows.find((item: any) => item.model === 'Project' && !item.colPid)

  state.queryParams.modelid = current.modelid

  getList()
}

getCategory()

// 获取文章
const getList = async () => {
  const { data: res }: any = await useAsyncData(`use_Article`, () => useIndexArticle(state.queryParams))
  const data = res.value.data

  state.project.rows = data.rows
  state.total = data.total
}

// 处理翻页
const onCurrentChange = (page: number) => {
  state.queryParams.page = page

  getList()
}
</script>
<style></style>
